<!DOCTYPE  HTML> 
<head> 
<title>Win 10</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="renderer" content="webkit" />
<style>
body {
    background: #006dae;
    user-select: none;
    -ms-user-select: none;
    -webkit-background-size: cover;
    background-size: cover;
    vertical-align: middle;
    text-align: center;
    z-index: -1;
    margin: 0;
    padding: 0;
}
.box{
    position: absolute;
    top: 50%;
    height: 160px;
    margin-top: -80px;
    width: 100%;
}
.con {
    width: 500px;
    margin: 0 auto;
}
p{
    font-family: 'Microsoft YaHei UI Light','Microsoft YaHei UI', Arial;
    font-size: 23px;
    color: #fff;
    font-weight: normal;
    text-align: center;
    margin: 5px;
}
p.tips{
    position: absolute;
    bottom: 10%;
    width: 100%;
    margin: 0;
}
.loader{
    margin: 0 auto 30px auto;
    width: 50px;
    height: 50px;
    vertical-align:middle;
    padding-top:2px;
}
.loader .circle {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0;
  transform: rotate(225deg);
  animation-iteration-count: infinite;
  animation-name: orbit;
  animation-duration: 5.5s;
}
.loader .circle:after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background: #fff;
  /* Pick a color */
}
.loader .circle:nth-child(2) {
  animation-delay: 240ms;
}
.loader .circle:nth-child(3) {
  animation-delay: 480ms;
}
.loader .circle:nth-child(4) {
  animation-delay: 720ms;
}
.loader .circle:nth-child(5) {
  animation-delay: 960ms;
}
@keyframes orbit {
  0% {
    transform: rotate(225deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  7% {
    transform: rotate(345deg);
    animation-timing-function: linear;
  }
  30% {
    transform: rotate(455deg);
    animation-timing-function: ease-in-out;
  }
  39% {
    transform: rotate(690deg);
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(815deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(945deg);
    animation-timing-function: ease-out;
  }
  76% {
    transform: rotate(945deg);
    opacity: 0;
  }
  100% {
    transform: rotate(945deg);
    opacity: 0;
  }
}
</style>
</head> 
<body>

    <div class="box">
        <div class="con">
            <div class="loader">
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
                <div class="circle"></div>
            </div>
        </div>
        <p>正在进行更新 <span>18%</span></p>
        <p>请不要关闭电脑，执行此任务需要一定的时间。</p>
    </div>
    <p class="tips">你的电脑将重启几次。</p>

</body>
</html>